<!DOCTYPE html> 
<html> 
<head> 
	<title>Learning Environment</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	
	<script src="js/login.js"></script>
	<script src="js/courses.js"></script>  	
	<script src="js/course.js"></script>
	<script src="js/contact.js"></script>
	<script src="js/question.js"></script>
	<script src="js/newQuestion.js"></script>
	<script src="js/updates.js"></script>
	<script src="js/agenda.js"></script>
	<script src="js/maxLength.js"></script>
	
<!-- Switch content when pressed on a tab -->
	<SCRIPT>
		$('div[data-role="navbar"] a').live('click', function () {
			$(this).addClass('ui-btn-active');
			$('div.content_div').hide();
			$('div#' + $(this).attr('data-href')).show();
		});	
	</SCRIPT>
	<SCRIPT>
		$.mobile.page.prototype.options.backBtnText = "terug"
	</SCRIPT>
	
	<!-- Block the content of other tabs -->
	<style type="text/css">
		.content_div {
			display: none;
		}
		.content_div:first-child {
			display: block;
		}
	</style>
</head> 
<body class="ui-mobile-viewport"> 

<!-- Index.html -> home -->
<div data-role="page" id="home">
	<div data-role="content">
		<div align="center"><h1>MobiLEnvi</h1></div>
		<div data-role="fieldcontain">
			<table border="0" width="80%" height="120" align="center"> <!-- MISS BETER EEN BLOCK VAN MKEN, ZIE JQUERY MOBILE -->
				<tr align="center">
					<td width="33%"><a href="#updates" data-role="button" data-inline="true"><img src="images/licons/kf_emblem_synchronizing.png"/></a></td>
					<td width="33%"><a href="#agenda" data-role="button" data-inline="true"><img src="images/licons/ti_office_calendar.png"/></a></td>
					<td width="33%"><a href="#courses" data-role="button" data-inline="true"><img src="images/licons/kf_courses.png"/></a></td>
				</tr>
			</table>
		</div>
		<div data-role="fieldcontain">
			<ul id="updates_homepage" data-role="listview"></ul>
		</div>
	</div><!-- /content -->
</div>

<!-- Basic Courses page Layout -->
<div data-role="page" id="courses">	 
	<div data-role="header" data-theme="b">
		<a href="index.html" data-icon="home" class="ui-btn-left">Terug</a>
		<h1>Vakken</h1>
	</div>

	 <div data-role="content" class="content">
		<ul id="coursesList" data-role="listview" data-filter="true"></ul>
	 </div><!-- /content  -->
</div><!-- /vakkenTabel  -->

<div data-role="page" id="course">
	<!-- Header -->
	<div data-role="header" data-theme="b">
		<a href="#courses" data-direction="reverse" class="ui-btn-left">Terug</a>
		<a href="index.html" data-icon="home" class="ui-btn-right">Home</a>
		<h1 id="course_title" style="white-space:normal"></h1>
		<div data-role="navbar">
			<ul data-theme="a">
				<li><a href="#" data-href="course_info" data-theme="a" class="ui-btn-active" id="info_tab">Info</a></li>
				<li><a href="#" data-href="course_students" data-theme="a">Studenten</a></li>
 				<!--  <li><a href="#" data-href="course_updates" data-theme="a">Updates</a></li> -->
			</ul>
		</div><!-- /navbar -->
	</div><!-- /header -->	
	<!-- Content -->
	<div data-role="content">
		<!-- Content: Info -->	
		<div data-role="fieldcontain" class="content_div" id="course_info">
			<div data-role="fieldcontain">
				<ul data-role="listview" id="staff"></ul>
			</div>
			<div data-role="fieldcontain">
				<ul id="question_list" data-role="listview"></ul>
			</div>
			<div data-role="fieldcontain">
				<ul id="tweet_list" data-role="listview"></ul>
			</div>
			<div data-role="fieldcontain" id="tweet_buttons">
				<a href="#" data-role="button" id="show_more" data-inline="true">Toon Meer Tweets</a>
				<a href="#" data-role="button" id="hide_tweets" data-inline="true">Verberg Tweets</a>
			</div>
		</div>
		<!-- Students -->
		<div data-role="fieldcontain" class="content_div" id="course_students">
			<ul id="course_students_list" data-role="listview" data-filter="true"></ul>
		</div>
		<!--Updates -->
		<div data-role="fieldcontain" class="content_div" id="course_updates">
			<ul id="course_updates_list" data-role="listview"></ul>
		</div>
	</div><!-- /content --> 
</div><!-- /page -->
<script type="text/javascript">
$('#show_more').click(function (){
	showMoreTweets();
	console.log("show")
	$('#hide_tweets').show();
});

$('#hide_tweets').click(function (){
	hideTweets();
	console.log("hide")
	$('#hide_tweets').hide();
});

$('#course').live("pagebeforeshow", function(event) {
	if(localStorage.moreTweets == "false")
		$('#hide_tweets').hide();
	else $('#hide_tweets').show();
});
</script>

<script>
$('#contact_prof').click(function (){
	var course = JSON.parse(localStorage["course"]);
	localStorage["contact"] = JSON.stringify(course.prof);
	$.mobile.changePage('#contact');
});
</script>
<div data-role="page" id="contact">
	<div data-role="header" data-theme="b">
		<a href="#course" data-direction="reverse" class="ui-btn-left">Terug</a>
		<a href="index.html" data-icon="home" class="ui-btn-right">Home</a>
		<h1>Choose Method</h1>
	</div>
	<div data-role="content">
		<ul id="contact_methods" data-role="listview"></ul>
	</div>
</div>

<div data-role="page" id="question">
	<div data-role="header" data-theme="b">
		<a href="#course" data-direction="reverse" class="ui-btn-left">Terug</a>
		<a href="index.html" data-icon="home" class="ui-btn-right">Home</a>
		<h1 style="white-space:normal" id=question_header></h1>
	</div>
	<div data-role="content">
		<ul id="answer_list" data-role="listview" data-inset="true"></ul>
		<form id="awnser_form"  method="post" action="javascript:postNewAnswer()">
			<div data-role="fieldcontain">
				<label for="question_awnser">Antwoord:</label>
				<textarea name="question" id="question_answer"></textarea>
			</div>
			<fieldset class="ui-grid-a">
				<div class="ui-block-a"><button type="button" id="reply_cancel" data-theme="d">Annuleer</button></div>
				<div class="ui-block-b"><button type="submit" id="reply_submit" data-theme="b">Antwoord</button></div>
		    </fieldset>
		</form>
	</div>
</div>
<script>
$('#reply_cancel').click(function (){
	question_answer.value = "";
	$.mobile.changePage('#course');
});
</script>

<div data-role="page" id="new_question">
	<div data-role="header" data-theme="b">
		<a href="#course" data-direction="reverse" class="ui-btn-left">Terug</a>
		<a href="index.html" data-icon="home" class="ui-btn-right">Home</a>
		<h1>Nieuwe Vraag</h1>
	</div>
	<div data-role="content">
		<form id="new_question_form" method="post" action="javascript:postNewQuestion()">
			<div data-role="fieldcontain">
		         <label for="new_question_title">Onderwerp:</label>
		         <input type="text" name="new_question_title" id="new_question_title" value=""  />
			</div>
			<div data-role="fieldcontain">
				<label for="new_question_text">Vraag:</label>
				<textarea name="question_text" id="new_question_text"></textarea>
			</div>
			<fieldset class="ui-grid-a">
				<div class="ui-block-a"><button type="button" id="question_cancel" value="cancel" data-theme="d">Annuleer</button></div>
				<div class="ui-block-b"><button type="submit" id="submit_question" value="submit" data-theme="b">Bevestig</button></div>
		    </fieldset>
		</form>
	</div>
</div>
<script>
$('#question_cancel').click(function (){
	cancelNewQuestion();
});
</script>

<div data-role="page" id="make_tweet" data-add-back-btn="true">
	<div data-role="header" data-theme="b">
		<a href="index.html" data-icon="home" class="ui-btn-right">Home</a>
		<h1>Tweet</h1>
	</div>
	<div data-role="content">
		<form id="tweet_form"  method="post" action="javascript:postNewTweet()">
			<div data-role="fieldcontain">
				<label for="tweet_text">Text:</label>
				<textarea name="text" id="tweet_text" maxlength="140"></textarea>
			</div>
			<fieldset class="ui-grid-a">
				<div class="ui-block-a"><button type="button" id="tweet_cancel" data-theme="d">Annuleer</button></div>
				<div class="ui-block-b"><button type="submit" id="tweet_submit" data-theme="b">Antwoord</button></div>
		    </fieldset>
		</form>
	</div>
</div>
<script>
$('#tweet_cancel').click(function (){
	tweet_text.value = "";
	if(localStorage["contact"] == "null")
		$.mobile.changePage('#course');
	else $.mobile.changePage('#contact');
});
</script>

<div data-role="page" id="agenda">
	 <div data-role="header" data-theme="b">
	 <a href="#plan_afspraak" class="ui-btn-right">Plan Vrije Tijd</a>
	 	<a href="index.html" data-icon="home" class="ui-btn-left">Terug</a>
		<h1>Agenda</h1>
		<div data-role="navbar">
			<ul data-theme="a">
				<li><a href="#" data-href="alles" data-theme="a" class="ui-btn-active" id="alles_tab">Alle</a></li>
				<li><a href="#" data-href="uurrooster" data-theme="a">Uurrooster</a></li>
				<li><a href="#" data-href="deadlines" data-theme="a">Deadlines</a></li>
				<li><a href="#" data-href="meetings" data-theme="a">Afspraken</a></li>
				<li><a href="#" data-href="vrije_tijd" data-theme="a">Vrije Tijd</a></li>
			</ul>
		</div><!-- /navbar -->
	</div><!-- /header -->
	<div data-role="content">
		<div data-role="fieldcontain" class="content_div" id="alles">
			<ul id="agenda_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
		<div data-role="fieldcontain" class="content_div" id="uurrooster">
			<ul id="uurrooster_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
		<div data-role="fieldcontain" class="content_div" id="deadlines">
			<ul id="deadlines_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
		<div data-role="fieldcontain" class="content_div" id="meetings">
			<ul id="meetings_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
		<div data-role="fieldcontain" class="content_div" id="vrije_tijd">
			<ul id="vrije_tijd_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
	</div>
</div>

<div data-role="page" id="plan_afspraak" data-add-back-btn="true">
	<div data-role="header" data-theme="b">
		<a href="index.html" data-icon="home" class="ui-btn-right">Home</a>
		<h1 id="plan_header"></h1>
	</div>
	<div data-role="content">
		<form id="new_appointment_form" method="post" action="javascript:submitAfspraak('afspraak')">
			<div data-role="fieldcontain">
		        <label for="datum">Start Date:</label>
				<input type="date" name="date" id="datum" value="2011-12-22"  />
			</div>
			<div data-role="fieldcontain">
		        <label for="de_tijd">Start Time:</label>
				<input type="time" name="de_tijd" id="de_tijd" value="14:00"  />
			</div>
			<div data-role="fieldcontain">
		        <label for="duur">Duur (in uur):</label>
				<input name="duur" id="duur" value="2"  />
			</div>
			<div data-role="fieldcontain">
		        <label for="duur">Duur (in minuten):</label>
				<input name="duur_min" id="duur_min" value="0"  />
			</div>
			<div data-role="fieldcontain">
				<label for="locatie">Locatie:</label>
				<textarea name="locatie" id="locatie"></textarea>
			</div>
			<div data-role="fieldcontain">
				<label for="omschrijving">Omschrijving:</label>
				<textarea name="omschrijving" id="omschrijving"></textarea>
			</div>
			<fieldset class="ui-grid-a">
				<div class="ui-block-a"><button type="button" id="moment_cancel" data-theme="d">Annuleer</button></div>
				<div class="ui-block-b"><button type="submit" id="submit_moment" value="submit" data-theme="b">Bevestig</button></div>
		    </fieldset>
		</form>
	</div>
</div>
<script>
$('#moment_cancel').click(function (){
	locatie.value = "";
	omschrijving.value = "";
	if(localStorage["contact"] == "null")
		$.mobile.changePage('#agenda');
	else $.mobile.changePage('#course');
});
</script>

<div data-role="page" id="updates">
	 <div data-role="header" data-position="fixed" data-theme="b">
	 	<a href="index.html" data-icon="home" class="ui-btn-left">Terug</a>
	 	<a id="more_updates" class="ui-btn-right">Toon Meer</a>
		<h1>Updates</h1>
		<div data-role="navbar">
			<ul data-theme="a">
				<li><a href="#" data-href="updates_agenda" data-theme="a" class="ui-btn-active" id="agenda_tab">Agenda</a></li>
				<li><a href="#" data-href="updates_vakken" data-theme="a" id="vakken_tab">Vakken</a></li>
			</ul>
		</div>
	 </div><!-- /header -->
	<div data-role="content">
		<div data-role="fieldcontain" class="content_div" id="updates_agenda">
			<ul id="updates_agenda_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
		<div data-role="fieldcontain" class="content_div" id="updates_vakken">
			<ul id="updates_vakken_list" data-role="listview" data-scroll="true" data-filter="true"></ul>
		</div>
	</div>
</div>
<script>
	$('#more_updates').click( function() {
		switch(localStorage["currentUpdate"]) {
		case "agenda":
			agendaList.page = parseInt(agendaList.page)+1;
			addUpdates(agendaList);
			break;
		case "vakken":
			vakkenList.page = parseInt(vakkenList.page)+1;
			addUpdates(vakkenList);
			break;
		}
	});
</script>
</body>
</html>